import React from 'react'
import './rank-style.scss'
import classNames from 'classnames'


const RankView = (props)=>{
  const{titleName,data} = props;
  return(
    <div className="rank-view-wrapper">
      <div className={'view-title'}><span>{titleName}</span></div>
      <div className={'view-list-wrapper'}>
        <ul className={'ul-left'}>
          {data&& data.slice(0,5).map((item,index)=>{
            return (<li>
              <div className={'li-item'}>
                <span className={classNames('li-item-num',{first:index ===0},
                  {second:index ===1},{third:index===2})}>{index+1}</span>

                <span className={classNames('li-item-name',{'first-text':index ===0},
                  {'second-text':index===1},{'third-name':index===2})}>{item}</span>
              </div>
            </li>);
          })}
        </ul>

        <ul className={'ul-right'}>
          {data&& data.slice(5,10).map((item,index)=>{
            return (<li>
              <div className={'li-item'}>
                <span className={'li-item-num'}>{index+6}</span>
                <span className={'li-item-name'}>{item}</span>
              </div>
            </li>);
          })}
        </ul>
      </div>
    </div>);
}

RankView.propTypes = {
  data: React.PropTypes.object,
  titleName:React.PropTypes.string,
};

export default RankView;
